<template>
  <div>
    <div style="margin-bottom: 0px;padding:0 32px;width: 100%;height:36px;line-height:36px;background: #F5F6F8">
      <div style="float: left">
        <div class="center">
          计时图例：&nbsp;&nbsp;[—]不计时&nbsp;&nbsp;
          <input disabled style="width: 15px;height: 15px;" />&nbsp;正常&nbsp;&nbsp;&nbsp;&nbsp;
          <input disabled style="width: 15px;height: 15px;background-color: #FFFF00;" />&nbsp;预警&nbsp;&nbsp;&nbsp;&nbsp;
          <input disabled style="width: 15px;height: 15px;background-color: #FF7F27;" />&nbsp;警告&nbsp;&nbsp;&nbsp;&nbsp;
          <input disabled style="width: 15px;height: 15px;background-color: #DC143C;" />&nbsp;超期&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
      </div>
      <div style="float: right;">
        <div class="center">
          编号图例：&nbsp;&nbsp;
          <input disabled style="width: 15px;height: 15px;background-color: #FF0000;" />&nbsp;加急&nbsp;&nbsp;&nbsp;&nbsp;
          <input disabled style="width: 15px;height: 15px;background-color: #5FBD00;" />&nbsp;暂停&nbsp;&nbsp;&nbsp;&nbsp;
          <input disabled style="width: 15px;height: 15px;background-color: #1890ff;" />&nbsp;正常
        </div>
      </div>
    </div>
    <el-table :data="comm1" style="width: 100%">
      <el-table-column prop="阶段倒计时" label="计时" width="120px">
        <template slot-scope="scope">
          <div v-html="scope.row.阶段倒计时" />
        </template>
      </el-table-column>
      <el-table-column prop="时限" label="时限" width="60px" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="报建编号" label="编号" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <a @click="showSingle(scope.row)" v-html="scope.row.项目编号"/>
        </template>
      </el-table-column>
      <el-table-column prop="项目名称" :show-overflow-tooltip="true" label="文件名称"></el-table-column>
      <el-table-column prop="所属阶段" :show-overflow-tooltip="true" label="事项—环节" ></el-table-column>
      <el-table-column prop="发送人" :show-overflow-tooltip="true" label="发送人" width="70" ></el-table-column>
      <el-table-column prop="接收时间" :show-overflow-tooltip="true" label="接收时间" width="148"></el-table-column>
    </el-table>
  </div>
</template>
<script>
  import { ACCESS_TOKEN,ACCESS_TOKEN_IP } from "@/store/mutation-types"
  import Vue from 'vue'
  import {handleUrl,openIFrame } from '@/utils/util'
  export default {
    data() {
      return {
        timer:'',
        titleColor: false,
        count: 0,
        comm1: []
      }
    },
    mounted() {
      this.getTaskList();
      // 每5分钟刷新一次
      this.timer = setInterval(this.getTaskList, 300000);
    },
    beforeDestroy() {
      clearInterval(this.timer);
    },
    create() {},
    methods: {
      //给父组件传值
      sendCountToParent(){
        this.$emit('getCount',this.count);
      },
      showSingle(record){
        let baseUrl = process.env.VUE_APP_ADD_HTTP;
        let ticket = Vue.ls.get(ACCESS_TOKEN);
        let UserIP = "&UserIP="+ Vue.ls.get(ACCESS_TOKEN_IP);
        let retUrl = record.taskURL;
        let ReturnUrl = encodeURIComponent(handleUrl(retUrl));
        let url = baseUrl + "/login.xip?LoginMethod=ssologin&Ticket=" + ticket + UserIP + "&ReturnUrl="+ ReturnUrl;
        openIFrame(record.报建编号, '/Task/'+record.报建编号, record.报建编号, url)
        this.$router.push({ name: record.报建编号 })
      },
      getTaskList() {
        let that = this;
        let params = {
          serviceName: "Xinfo.Bus.BL.Service.EgovPlatform.PortalLet.TaskOfWaitingPortalLetService,Xinfo.Bus.BL.Service",
          guid: 'rcgz_dbrw',
          getCount: true,
          intTypeId: 0,
          strBizType: "A",
          TaskType: 1,
        }
        this.getRequest("/PortalLet/GetPortalLetData", params)
          .then(res => {
            that.comm1 = []
            res.data.forEach((row, index) => {
              if (index < 10) {
                that.comm1.push(row)
              }
            });
            that.count = res.count;
            that.sendCountToParent();
          })
      }
    }
  }
</script>
<style scoped>
  td {
    height: 30px !important;
  }

  .ant-table td {
    height: 48px !important;
  }

  .active {
    color: #ff8000 !important;
  }

  .ant-table .ant-table-title {
    border: none !important;
    display: block !important;
    padding: 10px 0 10px 6px;
  }

  .center {
    display: flex;
    align-items: center;
    font-size: 12px;
  }

  .ant-table .ant-table-small>.ant-table-content>.ant-table-body {
    margin: 0 !important;
  }

  .ant-table .ant-table-title {
    padding: 10px 0 0px 6px !important;
  }
</style>
<style>
  .ant-table .ant-table-title {
    border: none !important;
    display: block !important;
    padding: 10px 0 10px 6px;
  }

  .top-title {
    padding: 5px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  @media (min-width: 640px) {
    .auto-width {
      width: 80px;
    }
  }

  @media (min-width: 960px) {
    .auto-width {
      width: 120px;
    }
  }

  @media (min-width: 1200px) {
    .auto-width {
      width: 150px;
    }
  }

  @media (min-width: 1450px) {
    .auto-width {
      width: 200px;
    }
  }

  @media (min-width: 1600px) {
    .auto-width {
      width: 250px;
    }
  }

  .nav-bar {}

  .nav-bar li {
    width: 16.6%;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    padding-bottom: 20px;
  }

  .nav-bar li a img {
    width: 70%;
    margin-bottom: -20px;
  }

  .nav-bar li a p {}

  .more-task {
    width: 100%;
    padding:0;
    margin:-1px;
  }

  .more-task li {
    width: 50%;
  }
</style>